<template>
  <div class="big-box">
    <div class="header-container">
      <div class="title">监管账户预选单</div>
      <el-form
        ref="formInline"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="选择主账户：" prop="account">
          <el-select
            v-model="formInline.account"
            placeholder="请选择主账户"
            @change="selecAccount"
          >
            <el-option
              v-for="item in accountData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品来源：" prop="source">
          <el-select
            v-model="formInline.source"
            placeholder="请选择商品来源"
            @change="selectSource"
          >
            <el-option
              v-for="item in sourceData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="预选单号：" prop="order">
          <el-input v-model="formInline.order" />
        </el-form-item>
        <el-form-item class="btn">
          <button class="search-btn" @click="onSearch">查询</button>
          <button class="reset-btn" @click="resetForm">重置</button>
        </el-form-item>
      </el-form>
    </div>
    <div class="middle-container" />
    <div class="main-container">
      <div class="list-container">
        <span>列表</span><span>商品名称</span> <span>单价（元）</span><span>数量</span> <span>小计（元）</span><span>操作</span>
      </div>
      <div class="collapse-container">
        <el-collapse v-model="activeNames" accordion @change="handleChange">
          <el-collapse-item name="1">
            <template slot="title">
              <i
                :class="activeNames == '1' ? 'el-icon-minus' : 'el-icon-plus'"
              />
              <div class="order-source">
                <span>预选单来源：</span><span>13800138000（张三）</span>
              </div>
              <div class="delivery-address">
                <span>收货地址：</span><span>天津省-天津市-和平区-111,某2,18520640817</span>
              </div>

              <div class="approval-status-no">未审批</div>
              <!-- <div class="approval-status-reject">拒绝</div> -->
              <!-- <div class="approval-status-agree">已同意</div> -->
              <div class="approval" @click="toShowApprovedLogging">
                查看/审批
              </div>
            </template>
            <div class="content-item">
              <div class="monopoly-container">
                <div class="store-container">
                  <div class="store-name">
                    <span>店铺： </span><span>仪器仪表专卖</span>
                  </div>

                  <div class="order-num">
                    <span>预选单号：</span><span>20191029144030932-3333</span>
                  </div>
                </div>
                <div class="warehouse-item">
                  <div class="warehouse-info">
                    <img src="../../assets/images/warehouse.png" alt="">
                    <span>天河仓库</span>
                  </div>
                  <div class="goods-list">
                    <div class="goods-item">
                      <img src="../../assets/images/steel.png" alt="">
                      <div class="item-info">
                        <div class="name">
                          <span>钢管</span>
                          <i
                            style="padding-left: 10px;color: #ff3b30;font-size:13px;cursor:pointer"
                            class="iconfont icon-view-text"
                            @click="toSearchResult"
                          />
                        </div>
                        <div class="mark">标 号：外16内6.03</div>
                        <div class="mark">标 号：外16内6.03</div>
                        <div class="mark">标 号：外16内6.03</div>
                      </div>
                      <div class="univalence">58.00</div>
                      <div class="numble">1</div>
                      <div class="total-price">
                        58.00
                      </div>
                    </div>
                  </div>
                  <div class="money-container">
                    <div class="money-details">
                      <div class="total-money">2件商品，总商品金额：￥116.00</div>
                      <div class="transportation">运输里程：200.00km</div>
                      <div class="transportation-money">
                        <span>运费总价：</span><span
                          class="all-money"
                          @click="toFreight"
                        >￥20.00></span>
                      </div>
                    </div>
                    <div class="total-money">
                      店铺合计：￥116.00
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <!-- 查看审核记录弹窗 -->
    <ApprovedLogging
      v-if="showApprovedLogging"
      :table-data="tableData"
      @closePopUp="closePopUp"
      @onSubmit="onSubmit"
    />
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page.sync="pageIndex"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="pageSize"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import ApprovedLogging from './component/PopUpApprovedLogging'
import { listSupervisedPreorder } from '../../api/regulatory-budget-orders/index'
export default {
  components: {
    ApprovedLogging
  },
  data() {
    return {
      formInline: {
        account: '',
        source: '',
        order: ''
      },
      pageSize: 2,
      pageIndex: 1,
      total: 10,
      accountData: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      sourceData: [
        {
          value: '选项1',
          label: '1688'
        },
        {
          value: '选项2',
          label: '淘宝'
        },
        {
          value: '选项3',
          label: '拼多多'
        }
      ],
      activeNames: '0',
      showApprovedLogging: false,
      tableData: [
        {
          status: '不同意',
          man: '13750425814',
          opinion: '你为什么不买这样东西，这个东西很重要的',
          date: '2019-09-06 14:23:50',
          operation: '查看清单'
        },
        {
          status: '不同意',
          man: '13750425814',
          opinion: '你为什么不买这样东西，这个东西很重要的',
          date: '2019-09-06 14:23:50',
          operation: '查看清单'
        }
      ]
    }
  },
  mounted() {
    this.gainList()
  },
  beforeDestroy() {
    this.handleChange()
  },
  methods: {
    toShowApprovedLogging() {
      this.showApprovedLogging = true
      document.body.style.overflow = 'hidden'
    },
    closePopUp() {
      this.showApprovedLogging = false
      document.body.style.overflow = 'auto'
    },
    onSubmit() {
      this.showApprovedLogging = false
      console.log('submit!')
    },
    onSearch() {},
    // 重置
    resetForm() {
      this.$refs.formInline.resetFields()
    },
    // 页个数数改变的时候可获取当前显示个数
    handleSizeChange(size) {
      this.pageSize = size
    },
    // 页数改变的时候可获取当前显示当前页码数
    handleCurrentChange(currentPage) {
      console.log(currentPage)
      this.pageIndex = currentPage
      this.checked = false
      if (this.activeIndex == 0) {
        this.getListPersonalMsg()
      } else {
        this.getlistSystemMsg()
      }
    },
    selectSource(source) {
      this.source = source
    },
    selecAccount(account) {
      this.account = account
    },
    handleChange(val) {
      this.activeNames = val
      if (val) {
        console.log(val)
        console.log('sdffds')
      }
    },
    toFreight() {
      console.log('去运费详情页面')
      // this.$router.push('/')
      this.$router.push({
        path: '/prepaid'
      })
    },
    toSearchResult() {
      console.log('去搜索结果页面')
      this.$router.push('/search-result')
    },
    gainList() {
      const size = 5
      const index = 1
      listSupervisedPreorder(index, size).then(res => {
        console.log(res)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.el-pagination {
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  // margin-top: 20px;
  background-color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #fff;
  color: #ff3b30ff;
  border: 1px solid #ff3b30ff;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled) {
  // background-color: #fff;
  border: 1px solid #ddddddff;
}
::v-deep .el-pagination.is-background .btn-prev {
  border: 1px solid #ddddddff;
  padding: 0 15px;
}
::v-deep .el-icon-arrow-left:before {
  content: "上一页";
}
::v-deep .el-pagination.is-background .btn-next {
  border: 1px solid #ddddddff;
  padding: 0 15px;
}
::v-deep .el-icon-arrow-right:before {
  content: "下一页";
}
.big-box {
  background-color: #f7f7f7;
  height: 100%;
}
.el-icon-plus:before {
  font-weight: 700;
  color: #10b2d4ff;
}
.el-icon-minus:before {
  font-weight: 700;
  color: #10b2d4ff;
}

.collapse-container {
  background-color: #f7f7f7;
  // padding-bottom: 12px;
}

::v-deep .el-collapse-item__header {
  height: 52px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  border: none;
  .approval {
    width: 81px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #02a9f1ff;
    border-radius: 4px;
    color: #ffffffff;
    margin-right: 0;
  }
  .approval-status-no {
    color: #fc8a41ff;
    margin: 0 117px 0 50px;
  }
  .approval-status-reject {
    color: #ff3b30;
    margin: 0 117px 0 50px;
  }
  .approval-status-agree {
    color: #4cd964ff;
    margin: 0 117px 0 50px;
  }
  .order-source {
    min-width: 215px;
    // margin: 0 40px 0 0;
  }
}
.content-item {
  .monopoly-container {
    .store-container {
      padding: 17px 24px 0px 20px;
      display: flex;
      background-color: #fff;
      color: #3d3d3dff;
      display: flex;
      justify-content: space-between;
      font-weight: 600;
      // margin-bottom: 20px;
    }
       .warehouse-item {
        padding: 0px 0 10px 0px;
        background-color: #fff;

        .warehouse-info {
          padding: 0px 18px 10px 20px;
          display: flex;
          align-items: center;
          border-bottom: 1px dashed #e5e5e5;
          margin-bottom: 20px;
          img {
            width: 11px;
            height: 11px;
            object-fit: cover;
            margin: 0 10px 0 0;
          }
          span {
            color: #a7a7aaff;
          }
        }
      }
      .warehouse-item:last-child {
        padding-bottom: 0;

      }
    .goods-list {
      background-color: #fff;

      .goods-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        padding: 20px 60px 0 20px;
          padding-top: 0;
        img {
          width: 83px;
          height: 83px;
          object-fit: cover;
        }
        .item-info {
          height: 83px;
          margin-left: 30px;
          margin-right: 440px;
          .mark {
            font-size: 12px;
            color: #a7a7aa;
          }
        }
        .univalence {
        }
        .numble {
          margin: 0 89px 0 106px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .total-price {
          // margin-right: 106px;
        }
        .results-page {
          color: #6b6b6bff;
          span {
            margin-left: 10px;
          }
        }
        .results-page {
          cursor: pointer;
        }
      }
      .goods-item:last-child {
        margin-bottom: 15px;

      }
    }
  }
  .money-container {
    // margin-bottom: 20px;
    height: 69px;
    padding: 15px;
    display: flex;
    background-color: #fff;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: column;
    color: #6b6b6b;
    border: 1px solid #E5E5E5FF;
    border-top: 3px solid #E03523FF;
    .money-details {
      display: flex;
      .transportation {
        margin: 0 25px;
      }
      .transportation-money {
        .all-money {
          color: #02a9f1;
        }
        .all-money:hover {
          cursor: pointer;
        }
      }
    }
  }
}
.header-container {
  background-color: #fff;

  .title {
    height: 56px;
    font-weight: 700;
    font-size: 16px;
    padding-left: 20px;
    line-height: 56px;
    border-bottom: 3px solid #e5e5e5ff;
  }
  .demo-form-inline {
    padding: 20px;
    height: 77px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.middle-container {
  height: 20px;
  background-color: #f7f7f7;
}
.main-container {
  background-color: #f7f7f7;
  .list-container {
    height: 52px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 50px 0 20px;
    span:nth-child(2) {
      margin: 0 318px 0 105px;
    }
    span:nth-child(4) {
      margin: 0 68px 0 64px;
    }
    span:nth-child(5) {
      margin-right: 110px;
    }
  }
}
.btn {
  ::v-deep .el-form-item__content {
    display: flex;
  }
  .search {
    background-color: #ff3b30;
    width: 70px;
    height: 35px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-right: 6px;
  }
  .search:hover {
    cursor: pointer;
  }
  .reset-form {
    background-color: #f5f5f5;
    width: 70px;
    height: 35px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3d3d3dff;
    border: 1px solid #e5e5e5ff;
  }
  .reset-form:hover {
    cursor: pointer;
  }
}
::v-deep .el-form-item:nth-child(3) {
  margin-right: 150px;
}
::v-deep .el-form-item:nth-child(4) {
  margin-right: 0;
}
::v-deep .el-input {
  height: 35px;
  .el-input__inner {
    height: 35px;
  }
}
::v-deep .el-form-item__label {
  height: 35px;
  padding: 0;
}
::v-deep .el-form-item {
  margin: 0;
  margin-right: 35px;
}
::v-deep .el-form-item__label {
  text-align: right;
}
::v-deep .el-form-item__content {
  width: 130px;
  height: 35px;
  .el-select {
    height: 35px;
  }
}
::v-deep .el-collapse {
  margin-top: 10px;
  border: none;

  background-color: #fff;
}
::v-deep .el-collapse-item__arrow {
  display: none;
}
::v-deep .el-collapse-item__header.is-active {
  border-bottom: 1px solid #e5e5e5ff;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 0;
}
.el-select {
  ::v-deep .el-input__icon {
    line-height: 35px;
  }
}
::v-deep .el-collapse-item__wrap{
border-bottom: none;
}
</style>
